<template>
    <div id="ecard-add">
        <el-form :model="prdAddForm" :rules="prdAddFormRules" ref="prdAddForm" label-width="100px" class="demo-prdAddForm" size="small">
            <el-form-item label="产品名称" prop="typeId">
                <el-select clearable v-model="prdAddForm.typeId" placeholder="请选择一卡通类型" :disabled="isBackModify">
                    <el-option v-for="(item, index) in productTypeList"
                               :key="item.id"
                               :label="item.name"
                               :value="item.id">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="服务费" prop="serviceCharge" class="service-fee">
                <el-input v-model="prdAddForm.serviceCharge"></el-input>元
            </el-form-item>
            <!--<el-form-item label="库存价格">-->
            <!--<el-table-->
            <!--class="style-a"-->
            <!--:data="prdAddForm.stockAndPrice"-->
            <!--size="mini"-->
            <!--border-->
            <!--style="width: 400px">-->
            <!--<el-table-column-->
            <!--prop="total"-->
            <!--label="总库存"-->
            <!--align="center"-->
            <!--width="130">-->
            <!--<template slot-scope="scope">-->
            <!--<el-form :model="scope.row" size="small">-->
            <!--<el-form-item-->
            <!--prop="total"-->
            <!--:rules="[{pattern:/[0-9]/, message:'请输入整数', trigger:'blur'},-->
            <!--{required:true, message:'请输入总库存', trigger:'blur'}]">-->
            <!--<el-input min="1" class="input" v-model="scope.row.total"></el-input>-->
            <!--</el-form-item>-->
            <!--</el-form>-->
            <!--</template>-->
            <!--</el-table-column>-->
            <!--<el-table-column-->
            <!--prop="price"-->
            <!--label="门市价（元）"-->
            <!--align="center"-->
            <!--width="130">-->
            <!--<template slot-scope="scope">-->
            <!--<el-form :model="scope.row" size="small">-->
            <!--<el-form-item-->
            <!--prop="price"-->
            <!--:rules="[{pattern:/[0-9]/, message:'请输入数字', trigger:'blur'},-->
            <!--{required:true, message:'请输入门市价', trigger:'blur'}]">-->
            <!--<el-input min="1" class="input" v-model="scope.row.price"></el-input>-->
            <!--</el-form-item>-->
            <!--</el-form>-->
            <!--</template>-->
            <!--</el-table-column>-->
            <!--<el-table-column-->
            <!--label="操作"-->
            <!--align="center"-->
            <!--width="">-->
            <!--<template slot-scope="scope">-->
            <!--<a href="javascript:void(0);" @click="setCalendarPrice()">设置日历价格</a>-->
            <!--</template>-->
            <!--</el-table-column>-->
            <!--</el-table>-->
            <!--</el-form-item>-->
            <el-form-item label="库存价格" :rules="[{ required: true }]">
                <table border="0" cellspacing="1" cellpadding="0" width="600px" class="custom-table style-a">
                    <thead>
                    <th>总库存</th>
                    <th>门市价（元）</th>
                    <th>操作</th>
                    </thead>
                    <tbody>
                    <tr>
                        <td>
                            <el-form-item
                                    prop="total">
                                <el-input min="1" class="input" v-model="prdAddForm.total"></el-input>
                            </el-form-item>
                        </td>
                        <td>
                            <el-form-item
                                    prop="price">
                                <el-input min="1" class="input" v-model="prdAddForm.price"></el-input>
                            </el-form-item>
                        </td>
                        <td><a href="javascript:void(0);" @click="setCalendarPrice()">设置日历价格</a></td>
                    </tr>
                    </tbody>
                </table>
            </el-form-item>

            <el-form-item label="积分设置" class="score-set" :rules="[{ required: true }]">
                <el-form :model="prdAddForm.integralSetList[index]" :key="index" ref="scoreSetForm" label-width="100px" class="demo-prdAddForm" size="small" v-for="(item, index) in prdAddForm.integralSetList">
                    <el-form-item
                            :label="'第'+(index+1)+'次入园'"
                            class="score-set service-fee"
                            prop="scoreSet"
                            :rules="[{required:true, message:'请输入比例值', trigger:'blur'},
                                     {pattern:/^[0-9]{1,3}$/, message:'请输入整数', trigger:'blur'}]">
                        <el-input v-model="item.scoreSet"></el-input>%
                    </el-form-item><span class="minus" @click="deleteSet(index)" v-if="index != 0">-</span>
                </el-form><span class="plus" @click="addSet()">+</span>
            </el-form-item>
            <el-form-item label="代理分配">
                <el-table
                        class="custom-table-2"
                        :data="prdAddForm.productDistributionDtoList"
                        size="mini"
                        border
                        style="width: 700px">
                    <el-table-column
                            prop="orgId"
                            label="代理商ID"
                            align="center"
                            width="100">
                    </el-table-column>
                    <el-table-column
                            prop="orgName"
                            label="代理商名称"
                            align="center"
                            width="">
                    </el-table-column>
                    <el-table-column
                            class="stock"
                            prop="stock"
                            label="库存"
                            align="center">
                        <template slot-scope="scope">
                            <el-form :model="scope.row" size="small">
                                <el-form-item
                                        prop="stock"
                                        :rules="[{validator:valiAgentStock, trigger:'blur'}]">
                                    <el-input min="1" class="input" v-model="scope.row.stock"></el-input>
                                </el-form-item>
                            </el-form>
                        </template>
                    </el-table-column>
                    <el-table-column
                            prop="serviceCharge"
                            label="返佣（元）"
                            align="center">
                        <template slot-scope="scope">
                            <el-form :model="scope.row" size="small">
                                <el-form-item
                                        prop="serviceCharge"
                                        :rules="[{validator:valiAgentServiceCharge, trigger:'blur'}]">
                                    <el-input min="1" class="input" v-model="scope.row.serviceCharge"></el-input>
                                </el-form-item>
                            </el-form>
                        </template>
                    </el-table-column>
                </el-table>
            </el-form-item>
            <el-form-item label="退款设置" prop="refundUnactive">
                <p>未激活退款<el-input v-model="prdAddForm.refundUnactive"></el-input>元</p>
            </el-form-item>
            <el-form-item label="产品详情" prop="productDetail">
                <tinymce :height="300" :width="600" v-model="prdAddForm.productDetail"></tinymce>
            </el-form-item>
            <el-form-item label="退款说明" prop="refundExplain">
                <el-input
                        type="textarea"
                        :rows="2"
                        placeholder="请输入内容"
                        v-model="prdAddForm.refundExplain">
                </el-input>
            </el-form-item>
            <el-form-item label="短信设置" prop="messageContent">
                <el-input
                        type="textarea"
                        :rows="2"
                        placeholder="请输入内容"
                        v-model="prdAddForm.messageContent">
                </el-input>
            </el-form-item>
            <el-form-item label="适用人群" prop="applyPerson">
                <el-input
                        type="textarea"
                        :rows="1"
                        placeholder="请输入内容"
                        v-model="prdAddForm.applyPerson">
                </el-input>
            </el-form-item>
            <el-form-item label="产品图片" prop="name">
                <el-upload
                        class="avatar-uploader"
                        :action="fileUpload"
                        :show-file-list="false"
                        :on-success="handleAvatarSuccess"
                        :before-upload="beforeAvatarUpload">
                    <img v-if="prdAddForm.imageUrl" :src="prdAddForm.imageUrl" class="avatar">
                    <!--<div v-else class="pic-upload">-->
                    <!--<div class="upload">-->
                    <!--<p class="upload-middle"><span>浏览本地文件</span>上传封面照片</p>-->
                    <!--<p class="tip">建议上传小于2M,宽640px*高256px,JPG/JPEG/PNG格式</p>-->
                    <!--</div>-->
                    <!--</div>-->
                    <i class="el-icon-plus avatar-uploader-icon" v-else></i>
                </el-upload>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm('prdAddForm','scoreSetForm')" v-if="$route.query.status != 'edit'">确认添加</el-button>
                <el-button type="primary" @click="submitForm('prdAddForm','scoreSetForm')" v-else>确认修改</el-button>
                <!--<el-button @click="closeForm()">取消</el-button>-->
            </el-form-item>
        </el-form>
        <el-dialog
                title="日历价格"
                width="800px"
                :visible.sync="calendarDialogVisible">
            <calendar-price
                    v-if="updateCalendar"
                    :calendarProp="calendarDataSet"
                    :calendarSet="calendarDataSet.calendarData"
                    @resetUpdate="resetUpdate"
                    @calendarUpdate="calendarUpdate">
            </calendar-price>
        </el-dialog>
    </div>
</template>

<script>
	import { mapGetters } from 'vuex'
	import CalendarPrice from '@/components/CalendarPrice/calendarPrice.vue'
	import Tinymce from '@/components/Tinymce'
	import { getProductType, getAgentList, addProduct, getProductInfo, modifyProduct } from '@/api/productList'
	import { Message } from 'element-ui'
	import _ from 'lodash'
	const today = new Date()
    let currentYear = today.getFullYear()
	let currentMonth = today.getMonth()
	let currentDate = today.getDate()
	const currentTodayObj = new Date(currentYear, currentMonth, currentDate)
	export default {
		name: 'ecardAdd',
		computed: {
			...mapGetters([
				'name',
				'roles'
			])
		},
		components: {
			'calendar-price': CalendarPrice,
			'tinymce': Tinymce
		},
		data() {
			// 代理商库存校验
			let agentStockValidation = (rule, value, callback) => {
				let reg = /^-?\d+$/
				if ((value < 0 || value > 100000) && value) {
					callback(new Error('请输入整数'))
					return
				} else if (!reg.test(value) && value) {
					callback(new Error('请输入整数'))
					return
				}
				let Q = this.prdAddForm
				if (Q.total != '') {
					if (parseInt(Q.total) < parseInt(value)) {
						callback(new Error('代理商库存不得大于总库存' + Q.total))
						return
					}
				}
				callback()
			}
			// 总库存校验
			let totalStockValidation = (rule, value, callback) => {
				let tmpArray = this.prdAddForm.productDistributionDtoList
				let flag = tmpArray.some(item => {
					if (item.stock) {
						return parseInt(item.stock) > parseInt(value)
					}
				})
				if (flag) {
					callback(new Error('总库存不得小于代理商库存'))
					return
				}
				callback()
			}
			// 服务费校验
			let serviceChargeValidation = (rule, value, callback) => {
				let tmpArray = this.prdAddForm.productDistributionDtoList
				let flag = tmpArray.some(item => {
					if (item.serviceCharge) {
						return parseFloat(item.serviceCharge) > parseFloat(value)
					}
				})
				if (flag) {
					callback(new Error('服务费不得小于代理商返现金额'))
					return
				}
				callback()
			}
			// 代理商返佣校验
			let agentServiceChargeValidation = (rule, value, callback) => {
				let reg = /^[0-9]{1,8}([.][0-9]{1,2})?$/
				if (!reg.test(value) && value) {
					callback(new Error('请输入小数点后最多两位的数字'))
					return
				}
				if (this.prdAddForm.serviceCharge != '') {
					if (parseFloat(this.prdAddForm.serviceCharge) < parseFloat(value)) {
						callback(new Error('返现金额不得大于服务费' + this.prdAddForm.serviceCharge))
						return
					}
				}
				callback()
			}
			// 退款金额校验
			let refundUnactiveValidation = (rule, value, callback) => {
				let Q = this.prdAddForm
				let tmpArray = []
				if (this.calendarDataSet.calendarData) {
					this.calendarDataSet.calendarData.forEach(item => {
						tmpArray.push(item.price)
					})
				}
				tmpArray.push(Q.price)
				let maxPrice = null
				maxPrice = Math.max.apply(null, tmpArray)
				if (parseFloat(maxPrice) < parseFloat(value)) {
					callback(new Error('退款金额不得大于门市价' + maxPrice))
					return
				}
				callback()
			}
			// 门市价校验
//			let marketPriceValidation = (rule, value, callback) => {
//				if (parseFloat(this.prdAddForm.refundUnactive) > parseFloat(value)) {
//					callback(new Error('门市价不得小于退款金额' + this.prdAddForm.refundUnactive))
//					return
//				}
//				callback()
//			}
			return {
				fileUpload: process.env.BASE_API + '/files/upload',
				productTypeList: [],
				prdAddForm: {
					typeId: null,
					serviceCharge: null,
					total: null,
					price: null,
					integralSetList: [{ scoreSet: null }],
					productDistributionDtoList: [],
					refundUnactive: null,
					productDetail: '',
					refundExplain: '',
					messageContent: '',
					applyPerson: '',
					imageUrl: '',
					imageFileId: ''
				},
				prdAddFormRules: {
					typeId: [{ required: true, message: '请选择一卡通类型' }],
					total: [{ pattern: /^[0-9]+$/, message: '请输入整数', trigger: 'blur' },
						{ required: true, message: '请输入总库存', trigger: 'blur' },
						{ validator: totalStockValidation }],
					price: [{ pattern: /^[0-9]{1,8}([.][0-9]{1,2})?$/, message: '小数点后最多保留两位', trigger: 'blur' },
						{ required: true, message: '请输入门市价', trigger: 'blur' }],
					serviceCharge: [{ required: true, message: '请输入服务费', trigger: 'blur' },
						{ pattern: /^[0-9]{1,8}([.][0-9]{1,2})?$/, message: '请输入小数点后最多两位的数字', trigger: 'blur' },
						{ validator: serviceChargeValidation }],
					refundUnactive: [{ required: true, message: '请输入未激活退款' }, { pattern: /^[0-9]{1,8}([.][0-9]{1,2})?$/, message: '请输入小数点后最多两位的数字', trigger: 'blur' },
						{ validator: refundUnactiveValidation }]
				},
				valiAgentStock: agentStockValidation,
				valiAgentServiceCharge: agentServiceChargeValidation,
				tableData: [{ total: null, price: null }],
				imageUrl: '',
				isBackModify: false,
				calendarDialogVisible: false,
				calendarDataSet: {
					effect_time_start: currentTodayObj,
					price: '0.00',
					calendarData: []
				},
				updateCalendar: true
			}
		},
		created() {
			// 获取代理商列表
			this.getAgentList()
			// 获取产品类型
			this.getProductType()
			// 判断是否为产品编辑，如果是则请求产品信息，回填数据
			let paramsSet = this.$route.query
			if (paramsSet.status == 'edit') {
				this.isBackModify = true
				this.getProductInfo(paramsSet.id)
			}
		},
		methods: {
			getAgentList() {
				getAgentList().then(res => {
					let data = res.data
					if (data.errorCode === 'E_000') {
						this.prdAddForm.productDistributionDtoList = data.body
					}
				})
			},
			getProductType() {
				getProductType().then(res => {
					let data = res.data
					if (data.errorCode === 'E_000') {
						console.log(88888888888, data)
						this.productTypeList = data.body
					}
				})
			},
			setCalendarPrice() {
				if (!this.prdAddForm.price) {
					this.calendarDataSet.price = '0.00'
				} else {
					this.calendarDataSet.price = this.prdAddForm.price
				}
				this.calendarDialogVisible = true
				this.refreshCalendar()
			},
			calendarUpdate(dialogPops) {
				dialogPops.forEach((dialogProp) => {
					let update = {
						validDate: dialogProp.validDate,
						price: dialogProp.price
					}
					let existCalendarData = _.find(this.calendarDataSet.calendarData, (o) => {
						return o.validDate === dialogProp.validDate
					})
					if (existCalendarData) {
						this.$set(existCalendarData, 'price', dialogProp.price)
					} else {
						this.calendarDataSet.calendarData.push(update)
					}
				})
				this.refreshCalendar()
			},
			resetUpdate(dialogProp) {
				_.remove(this.calendarDataSet.calendarData, (calendarData) => {
					return _.indexOf(dialogProp.data, calendarData.validDate) != -1
				})
				this.refreshCalendar()
			},
			refreshCalendar() {
				this.updateCalendar = false
				this.$nextTick(() => {
					this.updateCalendar = true
				})
			},
			handleAvatarSuccess(res, file) {
				this.imageUrl = URL.createObjectURL(file.raw)
				this.prdAddForm.imageUrl = res.body.filePath
				this.prdAddForm.imageFileId = res.body.fileId
			},
			beforeAvatarUpload(file) {
				const isJPG = file.type === 'image/jpeg' || file.type === 'image/png'
				const isLt2M = file.size / 1024 / 1024 < 2
				if (!isJPG) {
					Message({
						message: '请上传小于2M，JPG/JPEG/PNG格式的图片!',
						type: 'error',
						duration: 2 * 1000
					})
				}
				if (!isLt2M) {
					Message({
						message: '请上传小于2M，JPG/JPEG/PNG格式的图片!',
						type: 'error',
						duration: 2 * 1000
					})
				}
				return isJPG && isLt2M
			},
			addSet() {
				let len = this.prdAddForm.integralSetList.length
				if (len > 19) {
					return
				} else {
					this.prdAddForm.integralSetList.push({ scoreSet: null })
				}
			},
			deleteSet(index) {
				this.prdAddForm.integralSetList.splice(index, 1)
			},
//			closeForm() {
//				let view = {
//					name: this.$route.name,
//					path: this.$route.path,
//					query: this.$route.query
//				}
//				this.$store.dispatch('delVisitedViews', view).then((views) => {
//					const latestView = views.slice(-1)[0]
//					if (latestView) {
//						this.$router.push({ path: latestView.path, query: latestView.query })
//					} else {
//						this.$router.push('/')
//					}
//				})
//			},
			submitForm(formName1, formName2) {
				//	校验积分设置
				let reg1 = /^[0-9]{1,3}$/
				let isIntegralVali = this.prdAddForm.integralSetList.some(item => {
					return !reg1.test(item.scoreSet)
				})
				if (isIntegralVali) { // 如果积分有一个不是整数
					Message({
						message: '积分设置必须为整数',
						type: 'warning',
						duration: 2 * 1000
					})
					return false
				}
				// 校验代理商库存
				let reg2 = /^-?\d+$/
				let isAgentStockVali = this.prdAddForm.productDistributionDtoList.some(item => {
					if (item.stock) {
						return !reg2.test(item.stock)
					}
				})
				if (isAgentStockVali) { // 如果库存有一个不是整数
					Message({
						message: '代理商库存必须为整数',
						type: 'warning',
						duration: 2 * 1000
					})
					return false
				}
				// 校验代理商返佣
				let reg3 = /^[0-9]{1,8}([.][0-9]{1,2})?$/
				let isAgentServiceChargeVali = this.prdAddForm.productDistributionDtoList.some(item => {
					if (item.serviceCharge) {
						return !reg3.test(item.serviceCharge)
					}
				})
				if (isAgentServiceChargeVali) { // 如果库存有一个不是整数
					Message({
						message: '代理商返佣只支持小数点后两位',
						type: 'warning',
						duration: 2 * 1000
					})
					return false
				}
				this.$refs[formName1].validate((valid) => {
					if (valid) {
						this.$refs[formName2][0].validate((valid) => {
							if (valid) {
								this.addProduct()
							} else {
								return false
							}
						})
					} else {
						return false
					}
				})
			},
			addProduct() {
				let prdAddForm = this.prdAddForm
				let tmpArray = []
				prdAddForm.integralSetList.forEach(item => { tmpArray.push(item.scoreSet) })
				let params = {
					applyPerson: prdAddForm.applyPerson,
					imageUrl: prdAddForm.imageFileId,
					integralSetList: tmpArray, // 积分设置顺序
					messageContent: prdAddForm.messageContent,
					price: prdAddForm.price,
					productDetail: prdAddForm.productDetail,
					productDistributionDtoList: prdAddForm.productDistributionDtoList,
					productPriceCalendarDtoList: this.calendarDataSet.calendarData,
					refundExplain: prdAddForm.refundExplain,
					refundUnactive: prdAddForm.refundUnactive,
					total: prdAddForm.total,
					typeId: prdAddForm.typeId,
					serviceCharge: prdAddForm.serviceCharge
				}
				// 修改产品
				if (this.$route.query.status == 'edit') {
					params.id = this.$route.query.id
					modifyProduct(params).then(res => {
						let data = res.data
						if (data.errorCode === 'E_000') {
							Message({
								message: data.message,
								type: 'success',
								duration: 2 * 1000
							})
							this.back()
						}
					})
				} else {
					addProduct(params).then(res => {
						let data = res.data
						if (data.errorCode === 'E_000') {
							Message({
								message: data.message,
								type: 'success',
								duration: 2 * 1000
							})
							this.back()
						}
					})
				}
			},
			back() {
//				this.closeForm()
                this.$router.push({ path: '/productManage/productList' })
			},
			getProductInfo(id) {
				let params = {
					id: id
				}
				getProductInfo(params).then(res => {
					let data = res.data
					if (data.errorCode === 'E_000') {
						// 数据回填
						this.setProductInfoBack(data.body)
					}
				})
			},
			setProductInfoBack(Data) {
				let prdAddForm = this.prdAddForm
				prdAddForm.applyPerson = Data.applyPerson
				prdAddForm.imageUrl = Data.imageUrl
				prdAddForm.imageFileId = Data.imageFileId
				let tmpArray = []
				Data.integralSetList.forEach(item => {
					let tmpObj = {
						scoreSet: item
					}
					tmpArray.push(tmpObj)
				})
				prdAddForm.integralSetList = tmpArray
				prdAddForm.messageContent = Data.messageContent
				prdAddForm.price = Data.price
				prdAddForm.productDetail = Data.productDetail
				prdAddForm.productDistributionDtoList = Data.productDistributionDtoList
				this.calendarDataSet.price = Data.price
				this.calendarDataSet.calendarData = Data.productPriceCalendarDtoList
				prdAddForm.refundExplain = Data.refundExplain
				prdAddForm.refundUnactive = Data.refundUnactive
				prdAddForm.total = Data.total
				prdAddForm.typeId = Data.typeId
				prdAddForm.serviceCharge = Data.serviceCharge
			}
		}
	}
</script>
<style rel="stylesheet/scss" scoped lang="scss">
    .custom-table{
        border-collapse:collapse;
        margin-top: 12px;
        border: 1px solid #ebeef5;
        font-size: 12px;
        tbody{
            tr{
                border-bottom: 1px solid #ebeef5;
                text-align: center;
                color: #606266;
                td:first-child{
                    padding-left: 16px;
                }
                td:last-child{
                    padding-right: 16px;
                }
                td{
                    border-right: 1px solid #ebeef5;
                    width: 170px;
                    padding: 4px 16px;
                }
            }
            tr:hover{
                background: #f5f7fa;
            }
            tr:last-child{
                border-bottom: 1px solid #ebeef5;
            }
        }
        thead{
            line-height: 38px;
            background-color: #f5f7fa;
            tr{
                text-align: left;
            }
            th:first-child{
                padding-left:16px;
            }
            th{
                color: #505a6d;
                font-weight: bold;
                border-right: 1px solid #ebeef5;
                border-bottom:1px solid #ebeef5;
            }
        }
    }
</style>
<style rel="stylesheet/scss" lang="scss">
    #ecard-add{
        .el-dialog__body{
            padding-top: 0;
        }
        .el-select{
            width: 170px;
            .el-input__inner{
                text-align: left;
            }
        }
        .custom-table-2,.custom-table{
            .el-form-item{
                margin-bottom: 10px;
            }
        }
        .custom-table-2{
            .cell{
                height: 44.5px;
                line-height: 44.5px;
            }
            td {
                padding: 3px 0;
            }
            .el-form-item__error{
                position: absolute;
                top: 32px;
            }
        }
        .service-fee .el-input{
            width: 170px;
        }
        .service-fee .el-input{
            margin-right: 10px;
        }
        .el-input__inner{
            text-align: center;
        }
        .tinymce-container{
            width: 1000px;
        }
        .el-textarea{
            width: 1000px;
        }
        p .el-input{
            margin: 0 10px 10px;
        }
        .editor-custom-btn-container{
            top: 2px;
        }
        .avatar-uploader .el-upload {
            border: 1px dashed #d9d9d9;
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }
        .avatar-uploader .el-upload:hover {
            border-color: #409EFF;
        }
        .avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 178px;
            height: 178px;
            line-height: 178px;
            text-align: center;
        }
        .avatar {
            width: 178px;
            height: 178px;
            display: block;
        }
        .score-set{
            position: relative;
            .el-form-item{
                display: inline-block;
                margin-right: 50px;
            }
            span{
                border: 1px solid #409EFF;
                width: 20px;
                height: 20px;
                display: inline-block;
                text-align: center;
                line-height: 19px;
                border-radius: 10px;
                color: #409EFF;
                user-select: none;
                &.minus{
                    left: 340px;
                    /*top: 6px;*/
                }
                &.plus{
                    position: absolute;
                    bottom: 25px;
                    left: 380px;
                }
            }
        }
    }
</style>
